
import ClassifyNav from '@/components/News/ClassifyNav'
import Link from 'next/link'
import styles from './styles.module.scss'
import { useState } from 'react'
import { useEffect } from 'react'
import { Pagination } from 'antd';
import Recommend from '@/components/News/Recommend'
import BrocadeCollection from '@/components/News/BrocadeCollection'
import useNavData from '@/store/getters/home'
import Image from '@/components/Image'
import Head from 'next/head'
import H5List from '@/components/H5/News/List'
import RenderJudge from '@/components/RenderJudge'
import { useMemoizedFn } from 'ahooks'
import { useRouter } from 'next/router'
const url = process.env.NEXT_PUBLIC_URLPROXY
const Classify = ({ params: initParams, initNews, recommendNewsData, videoList, everybody, mobile }) => {
  const [data, setData] = useState(initNews)
  const [params, setParams] = useState(initParams)
  const { newsNavList } = useNavData()
  const router = useRouter()
  useEffect(() => {
    setData(initNews)
  }, [initNews])
  useEffect(() => {
    setParams(initParams)
  }, [initParams])

  const itemRender = (page, type, originalElement) => {
    if (type === 'page') {
      return <Link href={`/news/${params.en}?page=${page}`}>{page}</Link>
    }
    return originalElement
  };
  const onChangePage = useMemoizedFn((page) => router.push(`/news/${params.en}?page=${page}`))
  return (
    <>
      <Head>
        <title>足球新闻_NBA新闻_体育新闻头条-鑫球体育</title>
        <meta name='description' content='体育新闻,足球新闻,NBA新闻,今日体育新闻,体育新闻头条,鑫球体育' />
        <meta name="keywords" content='鑫球体育为您提供国内和国际体育赛事直播前瞻，战报，赛程等最新最全体育新闻，主要包括欧洲五大联赛、中超、NBA、CBA、世界杯、欧冠及全球大小级别体育等，你想要的体育资讯都在这里！' />
      </Head>
      <RenderJudge value={mobile} active={
        <H5List everybody={everybody} recommendNewsData={recommendNewsData} />
      } inactive={
        <main className={styles.classify}>
          <section className={styles.left}>
            <ClassifyNav list={newsNavList} link="/news/" pathValue="en">
              {(row, css) => (
                <a title={row?.newsTypeName} className={Number(params?.id) === row?.id ? css.active : null}>
                  {row?.newsTypeName}
                </a>
              )}
            </ClassifyNav>
            <ul className={styles.list}>
              {
                data?.map(row => (
                  <Link href={`/news/${row?.id}`} key={row?.id}>
                    <a target="_blank" title={row?.newsTitle}>
                      <Image src={row?.newsImg} alt={row?.newsTitle} type={3}></Image>
                      <span>
                        <p>{row?.newsTitle}</p>
                        <p>{row?.publishDate}</p>
                      </span>
                    </a>
                  </Link>
                ))
              }
            </ul>
            <Pagination
              defaultCurrent={1}
              defaultPageSize={params.pageSize}
              current={params.current}
              total={params.total}
              pageSize={params.pageSize}
              style={{ marginLeft: 60 }}
              showSizeChanger={false}
              showQuickJumper={true}
              itemRender={itemRender}
              hideOnSinglePage
              onChange={onChangePage}
            />
          </section>

          <aside>
            {/* //这里用的数据都是足球的 */}
            <RenderJudge value={everybody?.length > 0} active={
              <section className={styles.every}>
                <p>大家都在看</p>
                <ul>
                  {
                    everybody?.map(r => (
                      <Link key={r?.id} href={`/news/` + r?.id}>
                        <a className='textoverone'>
                          {r?.newsTitle}
                        </a>
                      </Link>
                    ))
                  }
                  {/* <Link></Link> */}
                </ul>
              </section>
            } />
            <blockquote style={{ height: 20 }}></blockquote>
            <Recommend data={recommendNewsData} link={(row) => `/news/${row?.id}`} />
            <blockquote style={{ height: 20 }}></blockquote>
            <BrocadeCollection data={videoList} link={(row) => `/marvellous/${row?.id}`} />
          </aside>
        </main>
      } />
    </>
  )
}


export default Classify